<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        body{
            background-color: #757269;
        }
        #banner{
            list-style: none;
            position: absolute;
            padding: 0;
            top: 50px;
            left: 0;
            right: 0;
            margin: auto;
            width: 1200px;
            height: 300px;
            margin-top: calc(50vh -25px);
            cursor: pointer;
        }
        #banner li{
            float: left;
            position: absolute;
            left: 0;
            transition-duration: 0.4s;
        }
        #banner .cur-img{
            width: 600px;
            height: 300px;
            border-radius: 10px;
        }
        #banner .img_public{
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto;
            z-index: 100;
        }
        #banner .left{
            left: 0;
        }
        #banner .right{
            right: 0;
        }
    </style>
</head>
<body>
    <ul id="banner">
        <li><img src="./img/smar1.webp" alt="" class="cur-img"></li>
        <li><img src="./img/smar2.webp" alt="" class="cur-img"></li>
        <li><img src="./img/smar3.webp" alt="" class="cur-img"></li>
        <li><img src="./img/smar4.webp" alt="" class="cur-img"></li>
        <li><img src="./img/smar1.webp" alt="" class="cur-img"></li>
        <li><img src="./img/smar1.webp" alt="" class="cur-img"></li>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <img src="img/smar1.webp" alt="">
        <img src="img/smar1.webp" alt="">
    </ul>
    <script>
        window.onload=function(){
            let sz =[...document.querySelectorAll('#banner>li')];
            let szdiv=[...document.querySelectorAll('#banner>div')];
            let left=document.querySelector(left)
            let right=document.querySelector(right)
            for (let i=0;i< szdiv.length;i++){
                szdiv[i].name =i+1;
                szdiv[i].style.left=190*(i+1)+"px";
                if((i+1) !=5){
                    sz[1].id=5-(i+1);
                }else{
                    sz[i].id=5;

                }       
        }
        function effect(){
            for (let i=0;i<sz.length;i++){
                sz[i].style.sIndex =i;
                sz[i].style.transform="scale(1)"
            }
            sz[len -2].style.left="0px";
            sz[len -1].style.zIndex=100;
            sz[len -1].style.left="300px";
            sz[len -1].style.transform="scale(1.3)";
            sz[len -1].style.opacity=1;
            sz[len].style.left="600px";
            sync_szdiv()
        }
        function get_pre(){
            let give_up=sz[0];
            sz.shift();
            sz.push(give_up)
            effect();
        }
        function get_next(){
            let give_up =sz[len];
            sz.pop()
            sz.unshift(give_up)
            effect();
        }
        let timer=setInterval(get_next,3000)
        left.onclick=funtion(){
            clearInterval(timer);
            get_pre();
            timer =setInterval(get_next,3000)
        }
        right.onclick =funtion(){
            clearInterval(timer);
            get_next();
            timer=setInterval(get_next,3000)
        }
        let len=sz.length -1;
        effect();
        szdiv[0].style.backgroud ="black"
        for (let i=0;i<szdiv.length;i++){
            szdiv[i].onmouseenter =function(){
                clearInterval(timer);
                let len1 =sz[len -1].id;
                let len2 =szdiv[i].name;
                let dis=Math.max(len1.len2) -Math.min(len1,len2)
                if(len1>len2){
                    while(dis--)
                    get_pre()
                }else{
                    while (dis--)
                    get_next()
                }
                timer=setInterval(get_next,300)
          }
        }
        function sync_szdiv(){
            for(let i=0; i<szdiv.length;i++){
                if(szdiv[i].name ==sz[len - 1].id)
                szdiv[i].style.backgroud="black"
            else
            szdiv[i].style.backgroud="while"
            }
        }
    }
    </script>
</body>
</html>